<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海友网企业全国分布</title>
</head>

<body>

<div id="main" style="width: 1200px;height:1200px;"></div>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!--http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js-->
<script type="text/javascript" src="../js/echarts-all-3.js"></script>
<script type="text/javascript" src="../js/china.js"></script>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    
    <script type="text/javascript">


	   var cards_arr= new Array()

       for (var i = 0; i < 7; i++) {
            cards_arr[i] = []
        }


	   $.ajax({
		   url: "../json/cards.json",//json文件位置
		   type: "GET",//请求方式为get
		   dataType: "json", //返回数据格式为json
		   success: function(data) {//请求成功完成后要执行的方法 
			   //each循环 使用$.each方法遍历返回的数据date
			   $.each(data ,function(i, item) {
					cards_arr[item.typeid-1].push({
						name: item.name,
						value: [item.lng, item.lat]
				});
				
				loaddata(cards_arr)
			   })
		   }
		})


	function loaddata(data){
		//初始化
		var myChart = echarts.init(document.getElementById('main'));
		//myChart.showLoading();//加载数据前显示的动画效果
		/*
		res.push({
			name: "白玉路346号",
			value: [121.423744, 31.23829]   //这里concat后面的值就是value，这里统一设置成1。
		});
		res.push({
			name: "新民路城南工商所对面巷子（ 南苑菜市旁边 ）",
			value: [106.577573, 31.082472]   //这里concat后面的值就是value，这里统一设置成1。
		});
		*/
		//console.log(data)
		var chart = echarts.init(document.getElementById('main'));   //这里是主体的初始化echart方法，与上面的简单demo类似。
		chart.setOption({
		backgroundColor: '#404a59',
		title: {
			text: '海友网企业全国分布',
			subtext: 'data from cmfish',
			sublink: 'http://www.cmfish.com',
			x: 'center',
			textStyle: {
				color: '#fff'
			}
		},
		tooltip: {
        trigger: 'item'
      },
		legend: {
			orient: 'vertical',
			x: 'left',
			data: ['生产厂商','进出口商','代理商','店铺','繁殖','个人','其他'],
			textStyle: {
				color: 'orange'
			}

		},
		//地图坐标系必备的配置，具体的含义可以参考api，索性都是中文的，没有什么阅读障碍。
		geo: {
			silent:false,
			map: 'china',
			label: {
			    normal: {
                    show: false
                },
				emphasis: {
					show: true
				}
			},
			itemStyle: {
				hoverAnimation:true,
				normal: {
					areaColor: '#323c48',
					borderColor: '#000'
				},
				emphasis: {
					areaColor: '#2a333d',
					opacity:0
				}
			}
		},
		series: [
			{
				name: '生产厂商',
				type: 'scatter',
				coordinateSystem: 'geo',    //参照系：之前设置的geo。
				//这里是api数据接受的的地方
				data: data[0],
				symbolSize: 10,    //散点半径
				label: {
					normal: {
						formatter: '{b}',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				hoverAnimation:true,
				silent:false,
				animation:false,
				z:3
			},
			{
				name: '进出口商',
				type: 'scatter',
				coordinateSystem: 'geo',    //参照系：之前设置的geo。
				//这里是api数据接受的的地方
				data:data[1],
				symbolSize: 10,    //散点半径
				label: {
					normal: {
						formatter: '{b}',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				hoverAnimation:true,
				silent:false,
				animation:false,
				z:3
			},
			{
				name: '代理商',
				type: 'scatter',
				coordinateSystem: 'geo',    //参照系：之前设置的geo。
				//这里是api数据接受的的地方
				data:data[2],
				symbolSize: 10,    //散点半径
				label: {
					normal: {
						formatter: '{b}',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				hoverAnimation:true,
				silent:false,
				animation:false,
				z:3
			},
			{
				name: '店铺',
				type: 'scatter',
				coordinateSystem: 'geo',    //参照系：之前设置的geo。
				//这里是api数据接受的的地方
				data:data[3],
				symbolSize: 10,    //散点半径
				label: {
					normal: {
						formatter: '{b}',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				hoverAnimation:true,
				silent:false,
				animation:false,
				z:3
			},
			{
				name: '繁殖',
				type: 'scatter',
				coordinateSystem: 'geo',    //参照系：之前设置的geo。
				//这里是api数据接受的的地方
				data:data[4],
				symbolSize: 10,    //散点半径
				label: {
					normal: {
						formatter: '{b}',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				hoverAnimation:true,
				silent:false,
				animation:false,
				z:3
			},
			{
				name: '个人',
				type: 'scatter',
				coordinateSystem: 'geo',    //参照系：之前设置的geo。
				//这里是api数据接受的的地方
				data:data[5],
				symbolSize: 10,    //散点半径
				label: {
					normal: {
						formatter: '{b}',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				hoverAnimation:true,
				silent:false,
				animation:false,
				z:3
			},
			{
				name: '其他',
				type: 'scatter',
				coordinateSystem: 'geo',    //参照系：之前设置的geo。
				//这里是api数据接受的的地方
				data:data[6],
				symbolSize: 10,    //散点半径
				label: {
					normal: {
						formatter: '{b}',
						show: false
					},
					emphasis: {
						show: true
					}
				},
				hoverAnimation:true,
				silent:false,
				animation:false,
				z:3
			}
		]
		});
}

    
//myChart.setOption(option)
      
    </script>

</body>
</html>
